<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格编辑</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            box-sizing: border-box
        }
        
        #box {
            width: 500px;
            margin: 100px auto
        }
        
        table,
        th,
        td {
            border: 1px solid #000;
            border-collapse: collapse
        }
        
        td,
        th {
            width: 100px;
            height: 30px;
            padding: 10px
        }
        
        input[type="text"] {
            display: none;
            height: 24px;
            width: 60px;
            border: 1px solid #ccc;
        }
        
        tbody tr td:first-child {
            text-align: center;
        }
        
        tfoot td {
            text-align: right;
        }
        
        .editBtn {
            color: #666
        }
        
        .delBtn {
            color: red
        }
        
        .okBtn,
        .cancelBtn {
            display: none
        }
        
        .edit span {
            display: none
        }
        
        .edit input[type="text"] {
            display: inline-block
        }
        
        .edit .editBtn,
        .edit .delBtn {
            display: none
        }
        
        .edit .okBtn,
        .edit .cancelBtn {
            display: inline
        }
    </style>
</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span class="price">18</span><input type="text"></td>
                    <td><span class="num">1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span class="price">25</span><input type="text"></td>
                    <td><span class="num">2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span class="price">22</span><input type="text"></td>
                    <td><span class="num">3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>

                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span class="price">16</span><input type="text"></td>
                    <td><span class="num">4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script>
        var editBtns = document.querySelectorAll('.editBtn');
        var okBtns = document.querySelectorAll('.okBtn');
        var cancelBtns = document.querySelectorAll('.cancelBtn');
        var delBtns = document.querySelectorAll('.delBtn');
        var money = document.querySelector('#money');
        var prices = document.querySelectorAll('.price');
        var nums = document.querySelectorAll('.num');
        var sum = 0;
        // 编辑
        Array.from(editBtns).forEach(function(editBtn) {
            editBtn.onclick = function() {
                var tr = this.parentNode.parentNode;
                tr.classList.add('edit');
                var spans = tr.querySelectorAll('span');
                for (var i = 0; i < spans.length; i++) {
                    spans[i].nextElementSibling.value = spans[i].innerHTML;
                }
            }
        })

        // 确认
        Array.from(okBtns).forEach(function(okBtn) {
            okBtn.onclick = function() {
                var tr = this.parentNode.parentNode;
                tr.classList.remove('edit')
                var spans = tr.querySelectorAll('span');
                for (var i = 0; i < spans.length; i++) {
                    spans[i].innerHTML = spans[i].nextElementSibling.value;
                }
            }
        })

        // 取消
        Array.from(cancelBtns).forEach(function(cancelBtn) {
            cancelBtn.onclick = function() {
                var tr = this.parentNode.parentNode;
                tr.classList.remove('edit');
            }
        })

        // 删除
        Array.from(delBtns).forEach(function(delBtn) {
            delBtn.onclick = function() {
                var tr = this.parentNode.parentNode;
                if (confirm('确定删除吗？')) {
                    tr.remove();
                }
            }
        })

        // 全选和价格计算
        var allCheck = document.querySelector('#allCheck');
        var checks = document.querySelectorAll('.check')
        var n = 0;
        allCheck.onchange = function() {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = this.checked;
            }
            n = this.checked ? checks.length : 0;
            // 全选计算总价
            if (this.checked) {
                var sum = 0
                for (var j = 0; j < nums.length; j++) {
                    for (var k = 0; k < prices.length; k++) {
                        if (j == k) {
                            sum += nums[j].innerHTML * prices[k].innerHTML
                        }
                    }
                }
            } else {
                sum = 0
            }
            money.innerHTML = sum
        }
        Array.from(checks).forEach(function(check) {
            check.onchange = function() {
                this.checked ? n++ : n--;
                allCheck.checked = n == checks.length;
                var tr = this.parentNode.parentNode;
                var spans = tr.querySelectorAll('span');
                // 单选计算总价
                var price = spans[1].innerHTML * spans[2].innerHTML

                if (this.checked) {
                    sum += price
                } else {
                    sum -= price
                }

                money.innerHTML = sum;
            }

        })
    </script>
</body>

</html>